<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="mytag" uri="/WEB-INF/tag/tag.tld" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<mytag:head title="农产品溯源系统-设置" defineJs="/ncpsy/static/js/isQyLogin.js"
            defineCss="/ncpsy/static/css/tab-style.css"/>
<body>
<style>
    .raw-text-container {
        /*margin: 10px 0;*/
        text-align: left;
        color: #333;
    }
    .layui-row {
        margin-top: 30px;
    }
    .test-test {
        padding: 10px 0;
    }
    .test-test > pre {
        outline: 1px solid #ccc;
        background: #f8f8f8;
        padding: 20px;
    }
    h2 {
        margin-bottom: 20px;
    }
</style>
<div class="layui-container">
    <form class="layui-form" lay-filter="formTest">
        <div class="layui-row" style="margin-top:30px">
            <div class="layui-col-md4">&nbsp</div>
            <div class="layui-col-md4">
                <form class="layui-form">
                    <input type="text" name="ncpid" required lay-verify="required" placeholder="请输入农产品批次号"

                           autocomplete="off" class="layui-input search-text" maxlength="20" id="ncpid">
                </form>
            </div>
            <div class="layui-col-md2">
                <button type="button" class="layui-btn search-btn" lay-filter="search" id="search">搜索</button>
            </div>
            <div class="layui-col-md2">
                <a href="/ncpsy/goodsManagement" class="layui-btn search-btn" >农产品批次列表</a>
            </div>
        </div>
    </form>

    <div class="layui-row layui-col-space10">
        <div class="layui-col-md5">
            <div class="raw-text-container">
                <h2>产品原始数据</h2>
                <div class="test-test">无数据</div>
            </div>

        </div>
        <div class="layui-col-md7">
            <h2>产品信息</h2>
            <div>
                <table id="list" lay-filter="list" lay-data="{id: 'idTest'}"></table>
            </div>
        </div>
    </div>

</div>


<script>


    $('.search-btn').on('click', function() {
        let ncpId = $('.search-text').val();
        searchNCPById(ncpId).then(res => {
            renderRawJSONData(res);
            updateNCPForm(res)
        }).catch(err => console.log(err))
    });
    layui.use(['table', 'laypage', 'layer'], function() {
        layer=layui.layer;

    function showLoad() {
        return layer.msg('正在搜索请稍等...', {icon: 16,shade: [0.5, '#f5f5f5'],scrollbar: false,offset: 'auto', time:100000});
    }
    // 进入页面显示最新的农产品信息
    showLatestNCPInfo();
    var i;
    function showLatestNCPInfo() {
        $.ajax({
            url: '/ncpsy/queryNewNcp',
            type: 'get',
            headers: {
                'Content-Type': 'application/json;charset=utf-8;'
            },beforeSend: function () {
                i= showLoad()
                setTimeout(function () {
                    layer.close(i);
                },3000);
            },
            success: function(res) {
                searchNCPById(res.data.ncpid).then(res => {
                    renderRawJSONData(res);
                    updateNCPForm(res)
                }).catch(err => console.log(err))
            },
            error(err) {
                console.log(err)
            }
        })
      }
    });
    function searchNCPById(ncpId) {
        // 通过产品id查询产品链上信息
        return new Promise((resolve, reject) => {
            $.ajax({
                url: '/ncpsy/handle/product/' + ncpId,
                type: 'get',
                headers: {
                    'Content-Type': 'application/json;charset=utf-8;'
                },
                success: function(res) {
                    resolve(res)
                },
                error(err) {
                    reject(err)
                }
            })
        })
    }

    // 将原始json数据渲染到页面
    function renderRawJSONData(data) {
        $('.test-test').html('<pre>' + JSON.stringify(data, null, 4) + '</pre>')
    }

    // 更新产品信息表
    function updateNCPForm(data) {
        handleData(data);
        ncpData.push(handleData(data));
        tableNcp.reload({
            id: 'idTest',
            data: ncpData
        });
    }

    function handleData(data) {
        data.ccrq = new Date(data.ccrq).toLocaleString()
        return data
    }

    let item = {
        'cd': '黑龙江',
        'ccrq': 1590422400000,
        'ewmid': 'ewm027-ncp027-qy001',
        'zzfs': '水稻',
        'qyid': 'qy001',
        'ncpid': 'ncp027-qy001',
        'pz': '黑米',
        'ncpmc': '大米'
    }
    let ncpData = []

    let tableNcp
    layui.use(['table', 'laypage', 'layer'], function() {
        var table = layui.table,
            laypage = layui.laypage,
            layer = layui.layer

        var qyid = localStorage.getItem('qyid')
        var ncp = {
            qyid: qyid
        }

        //渲染表格
        tableNcp = table.render({
            elem: '#list',
            id: 'idTest',
            data: ncpData,
            page: true,
            cols: [[
                { field: 'ncpid', title: '农产品id', sort: true, fixed: 'left' },
                { field: 'ncpmc', title: '农产品名称' },
                { field: 'cd', title: '产地' },
                { field: 'pz', title: '品种' },
                { field: 'ccrq', title: '出厂日期', sort: true },
                { field: 'zzfs', title: '种植方式' },
                { field: 'qyid', title: '企业id' }//这里的toolbar值是模板元素的选择器
            ]]
        })
    })


    // renderRawJSONData(item)


</script>
</body>
</html>